<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇:新世界 - 经典模式</title>
    
    <!-- Bootstrap CSS -->
    <link href="../plugin/bootstrap-5.3.8-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="../plugin/bootstrap-icons-1.13.1/font/bootstrap-icons.css" rel="stylesheet">
    
    <style>
        body {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            color: white;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            min-height: 100vh;
        }
        
        .game-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .game-header {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .game-title {
            font-size: 2.5rem;
            font-weight: bold;
            text-align: center;
            margin-bottom: 10px;
            background: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .game-stats {
            display: flex;
            justify-content: space-around;
            align-items: center;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-value {
            font-size: 2rem;
            font-weight: bold;
            color: #feca57;
        }
        
        .stat-label {
            font-size: 0.9rem;
            color: #ccc;
        }
        
        .game-area {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .game-board-container {
            flex: 1;
            min-width: 300px;
        }
        
        .game-board {
            background: rgba(0, 0, 0, 0.3);
            border: 3px solid #feca57;
            border-radius: 10px;
            box-shadow: 0 0 30px rgba(254, 202, 87, 0.3);
        }
        
        #gameCanvas {
            display: block;
            margin: 0 auto;
            background: #0a0a0a;
            border-radius: 8px;
        }
        
        .game-controls {
            flex: 0 0 300px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 20px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .control-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .btn-game {
            background: linear-gradient(45deg, #ff6b6b, #feca57);
            border: none;
            color: white;
            padding: 12px 20px;
            border-radius: 8px;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        
        .btn-game:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
        }
        
        .btn-game:disabled {
            opacity: 0.5;
            transform: none;
            box-shadow: none;
        }
        
        .instructions {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            padding: 15px;
            margin-top: 20px;
        }
        
        .key-instruction {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            padding: 8px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
        }
        
        .key {
            background: #feca57;
            color: #000;
            padding: 4px 8px;
            border-radius: 4px;
            font-weight: bold;
            margin-right: 10px;
            min-width: 40px;
            text-align: center;
        }
        
        .game-over {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.9);
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            border: 2px solid #ff6b6b;
            display: none;
            z-index: 1000;
        }
        
        .mobile-controls {
            display: none;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 20px;
        }
        
        .mobile-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            padding: 15px;
            border-radius: 8px;
            font-size: 1.2rem;
            font-weight: bold;
        }
        
        @media (max-width: 768px) {
            .mobile-controls {
                display: grid;
            }
            
            .game-area {
                flex-direction: column;
            }
            
            .game-controls {
                flex: none;
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="game-container">
        <!-- 游戏头部 -->
        <div class="game-header">
            <h1 class="game-title">
                <i class="bi bi-controller me-2"></i>
                贪吃蛇:新世界 - 经典模式
            </h1>
            <div class="game-stats">
                <div class="stat-item">
                    <div class="stat-value" id="score">0</div>
                    <div class="stat-label">当前分数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value" id="highScore">0</div>
                    <div class="stat-label">最高分数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value" id="snakeLength">3</div>
                    <div class="stat-label">蛇长度</div>
                </div>
            </div>
        </div>
        
        <!-- 游戏区域 -->
        <div class="game-area">
            <!-- 游戏画板 -->
            <div class="game-board-container">
                <div class="game-board">
                    <canvas id="gameCanvas" width="600" height="600"></canvas>
                </div>
                
                <!-- 移动端控制按钮 -->
                <div class="mobile-controls">
                    <button class="mobile-btn" onclick="moveUp()">↑</button>
                    <button class="mobile-btn" onclick="moveLeft()">←</button>
                    <button class="mobile-btn" onclick="moveRight()">→</button>
                    <button class="mobile-btn" onclick="moveDown()">↓</button>
                    <button class="mobile-btn" onclick="pauseGame()">暂停</button>
                    <button class="mobile-btn" onclick="restartGame()">重开</button>
                </div>
            </div>
            
            <!-- 游戏控制面板 -->
            <div class="game-controls">
                <div class="control-buttons">
                    <button class="btn-game" onclick="startGame()" id="startBtn">
                        <i class="bi bi-play-fill me-2"></i>开始游戏
                    </button>
                    <button class="btn-game" onclick="pauseGame()" id="pauseBtn" disabled>
                        <i class="bi bi-pause-fill me-2"></i>暂停游戏
                    </button>
                    <button class="btn-game" onclick="restartGame()" id="restartBtn" disabled>
                        <i class="bi bi-arrow-repeat me-2"></i>重新开始
                    </button>
                    <button class="btn-game" onclick="goBack()">
                        <i class="bi bi-arrow-left me-2"></i>返回主页
                    </button>
                </div>
                
                <!-- 游戏说明 -->
                <div class="instructions">
                    <h5><i class="bi bi-keyboard me-2"></i>操作说明</h5>
                    <div class="key-instruction">
                        <span class="key">W / ↑</span>
                        <span>向上移动</span>
                    </div>
                    <div class="key-instruction">
                        <span class="key">S / ↓</span>
                        <span>向下移动</span>
                    </div>
                    <div class="key-instruction">
                        <span class="key">A / ←</span>
                        <span>向左移动</span>
                    </div>
                    <div class="key-instruction">
                        <span class="key">D / →</span>
                        <span>向右移动</span>
                    </div>
                    <div class="key-instruction">
                        <span class="key">空格</span>
                        <span>暂停/继续</span>
                    </div>
                    <div class="key-instruction">
                        <span class="key">R</span>
                        <span>重新开始</span>
                    </div>
                </div>
                
                <!-- 游戏提示 -->
                <div class="instructions mt-3">
                    <h5><i class="bi bi-lightbulb me-2"></i>游戏提示</h5>
                    <p class="small mb-2">• 控制蛇吃到食物来增加长度和分数</p>
                    <p class="small mb-2">• 避免撞到墙壁或自己的身体</p>
                    <p class="small mb-2">• 蛇越长，移动速度越快</p>
                    <p class="small">• 挑战自己的最高分数记录！</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 游戏结束弹窗 -->
    <div class="game-over" id="gameOver">
        <h2 class="text-danger mb-3">游戏结束！</h2>
        <div class="mb-3">
            <h4>最终分数: <span id="finalScore" class="text-warning">0</span></h4>
            <p>最高分数: <span id="finalHighScore" class="text-success">0</span></p>
        </div>
        <div class="d-grid gap-2">
            <button class="btn-game" onclick="restartGame()">
                <i class="bi bi-arrow-repeat me-2"></i>再玩一次
            </button>
            <button class="btn btn-outline-light" onclick="goBack()">
                <i class="bi bi-arrow-left me-2"></i>返回主页
            </button>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        // 游戏变量
        let canvas, ctx;
        let snake = [];
        let food = {};
        let direction = 'right';
        let nextDirection = 'right';
        let gameSpeed = 150;
        let score = 0;
        let highScore = localStorage.getItem('snakeHighScore') || 0;
        let gameRunning = false;
        let gameLoop;
        
        // 初始化游戏
        function initGame() {
            canvas = document.getElementById('gameCanvas');
            ctx = canvas.getContext('2d');
            
            // 初始化蛇
            snake = [
                {x: 10, y: 10},
                {x: 9, y: 10},
                {x: 8, y: 10}
            ];
            
            // 生成食物
            generateFood();
            
            // 更新显示
            updateDisplay();
            
            // 绘制初始状态
            drawGame();
        }
        
        // 开始游戏
        function startGame() {
            if (!gameRunning) {
                gameRunning = true;
                document.getElementById('startBtn').disabled = true;
                document.getElementById('pauseBtn').disabled = false;
                document.getElementById('restartBtn').disabled = false;
                
                gameLoop = setInterval(updateGame, gameSpeed);
            }
        }
        
        // 暂停游戏
        function pauseGame() {
            if (gameRunning) {
                gameRunning = false;
                clearInterval(gameLoop);
                document.getElementById('pauseBtn').innerHTML = '<i class="bi bi-play-fill me-2"></i>继续游戏';
            } else {
                startGame();
                document.getElementById('pauseBtn').innerHTML = '<i class="bi bi-pause-fill me-2"></i>暂停游戏';
            }
        }
        
        // 重新开始游戏
        function restartGame() {
            clearInterval(gameLoop);
            score = 0;
            direction = 'right';
            nextDirection = 'right';
            gameSpeed = 150;
            gameRunning = false;
            
            document.getElementById('gameOver').style.display = 'none';
            document.getElementById('startBtn').disabled = false;
            document.getElementById('pauseBtn').disabled = true;
            document.getElementById('pauseBtn').innerHTML = '<i class="bi bi-pause-fill me-2"></i>暂停游戏';
            
            initGame();
        }
        
        // 更新游戏状态
        function updateGame() {
            if (!gameRunning) return;
            
            direction = nextDirection;
            
            // 移动蛇头
            let head = {...snake[0]};
            
            switch(direction) {
                case 'up': head.y--; break;
                case 'down': head.y++; break;
                case 'left': head.x--; break;
                case 'right': head.x++; break;
            }
            
            // 检查碰撞
            if (checkCollision(head)) {
                gameOver();
                return;
            }
            
            // 添加新头
            snake.unshift(head);
            
            // 检查是否吃到食物
            if (head.x === food.x && head.y === food.y) {
                score += 10;
                generateFood();
                
                // 每得50分增加速度
                if (score % 50 === 0 && gameSpeed > 50) {
                    gameSpeed -= 10;
                    clearInterval(gameLoop);
                    gameLoop = setInterval(updateGame, gameSpeed);
                }
            } else {
                // 没吃到食物，移除尾部
                snake.pop();
            }
            
            // 更新显示
            updateDisplay();
            drawGame();
        }
        
        // 检查碰撞
        function checkCollision(head) {
            // 检查墙壁碰撞
            if (head.x < 0 || head.x >= 20 || head.y < 0 || head.y >= 20) {
                return true;
            }
            
            // 检查自身碰撞
            for (let i = 1; i < snake.length; i++) {
                if (head.x === snake[i].x && head.y === snake[i].y) {
                    return true;
                }
            }
            
            return false;
        }
        
        // 生成食物
        function generateFood() {
            let foodPosition;
            let foodOnSnake;
            
            do {
                foodOnSnake = false;
                foodPosition = {
                    x: Math.floor(Math.random() * 20),
                    y: Math.floor(Math.random() * 20)
                };
                
                // 检查食物是否在蛇身上
                for (let segment of snake) {
                    if (segment.x === foodPosition.x && segment.y === foodPosition.y) {
                        foodOnSnake = true;
                        break;
                    }
                }
            } while (foodOnSnake);
            
            food = foodPosition;
        }
        
        // 绘制游戏
        function drawGame() {
            // 清空画布
            ctx.fillStyle = '#0a0a0a';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 绘制网格
            ctx.strokeStyle = '#1a1a1a';
            ctx.lineWidth = 1;
            for (let i = 0; i <= 20; i++) {
                // 横线
                ctx.beginPath();
                ctx.moveTo(0, i * 30);
                ctx.lineTo(600, i * 30);
                ctx.stroke();
                
                // 竖线
                ctx.beginPath();
                ctx.moveTo(i * 30, 0);
                ctx.lineTo(i * 30, 600);
                ctx.stroke();
            }
            
            // 绘制蛇
            snake.forEach((segment, index) => {
                if (index === 0) {
                    // 蛇头
                    ctx.fillStyle = '#feca57';
                } else {
                    // 蛇身
                    ctx.fillStyle = '#48dbfb';
                }
                ctx.fillRect(segment.x * 30, segment.y * 30, 30, 30);
                
                // 蛇身边框
                ctx.strokeStyle = '#0a0a0a';
                ctx.lineWidth = 2;
                ctx.strokeRect(segment.x * 30, segment.y * 30, 30, 30);
            });
            
            // 绘制食物
            ctx.fillStyle = '#ff6b6b';
            ctx.beginPath();
            ctx.arc(food.x * 30 + 15, food.y * 30 + 15, 12, 0, Math.PI * 2);
            ctx.fill();
            
            // 食物光泽效果
            ctx.fillStyle = '#ffffff';
            ctx.beginPath();
            ctx.arc(food.x * 30 + 10, food.y * 30 + 10, 4, 0, Math.PI * 2);
            ctx.fill();
        }
        
        // 更新显示
        function updateDisplay() {
            document.getElementById('score').textContent = score;
            document.getElementById('highScore').textContent = highScore;
            document.getElementById('snakeLength').textContent = snake.length;
        }
        
        // 游戏结束
        function gameOver() {
            gameRunning = false;
            clearInterval(gameLoop);
            
            // 更新最高分
            if (score > highScore) {
                highScore = score;
                localStorage.setItem('snakeHighScore', highScore);
            }
            
            // 显示游戏结束界面
            document.getElementById('finalScore').textContent = score;
            document.getElementById('finalHighScore').textContent = highScore;
            document.getElementById('gameOver').style.display = 'block';
        }
        
        // 返回主页
        function goBack() {
            window.location.href = 'game-home.html';
        }
        
        // 移动控制函数
        function moveUp() {
            if (direction !== 'down') nextDirection = 'up';
        }
        
        function moveDown() {
            if (direction !== 'up') nextDirection = 'down';
        }
        
        function moveLeft() {
            if (direction !== 'right') nextDirection = 'left';
        }
        
        function moveRight() {
            if (direction !== 'left') nextDirection = 'right';
        }
        
        // 键盘控制
        document.addEventListener('keydown', (e) => {
            switch(e.key) {
                case 'w':
                case 'W':
                case 'ArrowUp':
                    if (direction !== 'down') nextDirection = 'up';
                    break;
                case 's':
                case 'S':
                case 'ArrowDown':
                    if (direction !== 'up') nextDirection = 'down';
                    break;
                case 'a':
                case 'A':
                case 'ArrowLeft':
                    if (direction !== 'right') nextDirection = 'left';
                    break;
                case 'd':
                case 'D':
                case 'ArrowRight':
                    if (direction !== 'left') nextDirection = 'right';
                    break;
                case ' ':
                    pauseGame();
                    e.preventDefault();
                    break;
                case 'r':
                case 'R':
                    restartGame();
                    break;
            }
        });
        
        // 页面加载时初始化游戏
        window.onload = initGame;
    </script>
</body>
</html>